<template>
    <div id="zxCupon">
        <popup v-model="show" position="bottom" style="width:100%;" :closeOnClickModal="false">
            <div id="get_ticket" style="display: flex;min-height:50vh;max-height:70vh;flex-direction: column;" >
               <!-- <div>电子发票已失效</div>
               <div>该订单电子发票已失效，不存在可下载的电子发票,可能原因如下</div>
			   <p>1.订单已关闭</p>
			   <p>2.订单实际付款金额为0(实际付款金额不包含 钱包 支付金额)</p> -->
			   <!-- <p>如有问题，请联系客服。</p> -->
               
				<ul class="aui-list aui-media-list commodity_list subtotal_list aui-margin-b-15">
					<li class="aui-list-item">
						<h3 class="" style="height:100%;line-height:2.5rem;">
							电子发票已失效
						</h3>
					</li>
					<li class=""  style="text-align: left;padding:0.75rem;">
						<div class="">
							<p>该订单电子发票已失效，不存在可下载的电子发票，可能原因如下：</p>
                            <p>1.订单已关闭</p>
							<p>2.订单实际付款金额为0(实际付款金额不包含钱包支付金额)</p>
							<p>如有问题，请联系客服。</p>

						</div>
					</li>
				</ul>
            </div>
			<!-- <div @click="">确认</div> -->
			<div class="cuponChoose aui-btn aui-btn-danger aui-btn-block aui-btn-sm">
				<div id="close_coupon" style="font-size: 1rem;" @click.stop="chooseYHEvent">确 定</div>
			</div>
        </popup>
    </div>
</template>
<script>
import { Popup } from 'mint-ui';
import {mapMutations,mapGetters} from 'vuex';
import {Toast} from "../../utils/toast";
export default {
    props: {
    	
        // couponArrHtm:{
        // 	type: Array,
        // 	default:function(){
        // 		let arr = [];
        // 		return arr;
        // 	}
        // },
        // money: {
        // 	type:Number,
        // 	default: function(){
        // 		return 0
        // 	}
        // },
       
    },
    data() {
        return {
            show: false,
            flag: 0,
           
        }
    },
    computed: {
        
    },
    methods: {
    	showCover() {
            this.show = true;
            this.flag = 1;
//          this.getYHData();
			
		},
		//解决ios显示不了 的兼容问题
    	appendZxCupon(){
    		// console.log('链接地址',this.$route.name)
    		if(document.querySelector("#zxCupon") && this.$route.name === 'confirmOrder'){
    			setTimeout(()=>{
	    			document.querySelector(".confirm-order-box").appendChild(document.querySelector("#zxCupon"))
	    		},300)
    		}
		},
		 chooseYHEvent() {
            // setTimeout(() => {
                this.show = false;
                this.flag = 0;
            // }, 100);
            
        },
		
    },
    components: {
        "popup": Popup
    },
    mounted(){
    	this.appendZxCupon();
    },
    created() {
       
    },
    beforeDestroy(){

    },
    watch: {
        // show(newVal) {
        //     if (this.show === true) {

        //     }
        // },
        
    }

}
</script>

<style scoped="scoped">
.backGround{
    color:#ef5423 !important;
}
.backGroundC{
    background:#ef5423;
}
.aui-toast {
    z-index: 9999;
}
.yh-radio {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.yh-useable {
    /*background: #fff url("../../../../static/image/coupon_bj.png") no-repeat right 2.8rem !important;*/
}
.yh-disable {
    /*background: #fff url("../../../../static/image/coupon_bj2.png") no-repeat right 2.8rem !important;*/
}
.coupon_list li{
	background: #FFFFFF;
}
.coupon_list .account_money_zx{
	/* background: url("../../../../static/image/coupon_bj_leftRed.png") no-repeat left -1rem; */
	background-size: 75%;
}
.zxTestPop{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.75rem;
    padding-right: 0.2rem;
    width: 100%;
    /* border-bottom: 1px solid #eaeaea; */
}
.coupon_list li em {
    position: absolute;
    left: 0.08rem;
    top: 0.15rem;
    bottom: unset !important;
    right: unset !important;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    color: #ffffff;
    font-size: 12px;
}
.m_close_page {
    /* padding: 0.4rem 0.6rem; */
    padding: 0;
    cursor: pointer;
    margin-left: unset; 
    margin-top: unset; 
    position: absolute;
    top: 0;
    left: unset;
    right: 1rem;    
    top: 8px;
}
.description_tit {
    text-align: left;
    /* padding: 0 1rem; */
}
.youhui{
	width: 9rem;
	font-size: 0.7rem;
	font-weight: normal !important; 
	white-space:normal;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}
.rules{
	color: #666;
    border: 1px solid #d7d7d7;
    display: inline;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1rem;
    font-size: 0.6rem;
}

.couponArr{
	padding-top: 0.3rem;
	border: 1px solid #ef5423;
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	line-height: 0.3rem;
	text-align: center;
	margin-left: 40%;
}
.couponInner{
	
}
.addBorder{
	border: 1px solid #ef5423;
}
.addBorder li:last-child{
	border-bottom:0px solid #eaeaea;	
}
.delMargin{
	margin-bottom: 0 !important;
	/*border: 0;*/
	border-bottom: 0px solid #eaeaea;
}
.delMargin:last-of-type{
	border-bottom: 0.5px solid #eaeaea;
}
.cuponChoose{
	height: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    border-top: 1px solid #eaeaea;
    padding: 0.25rem 0.75rem;
    /*margin-bottom: 0.8rem;*/
   border-radius: 0px;
}
#zxCupon .coupon_list li dl p{
	font-size: 0.6rem;
    height: 1rem;
    line-height: 1rem;
    white-space: nowrap;
}
#zxCupon .usePlatspan{
		display: inline-block;
		font-size: 0.6rem;
		line-height: 1rem;
		padding:0rem 0.1rem;
		padding:0rem 0.25rem;
		border-radius: 0.5rem;
		/*background-color: #FF9933;商城用
		background-color: #9FD959;体验中心用
		background-color: #EF5423; 商城体验中心通用*/
	}
#zxCupon .usePlatspan1{
		color: #38B035;
		background-color:rgba(56,176,53,0.1);/*商城用*/
	}
#zxCupon .usePlatspan2{
		color: #FFCC00;
		background-color: rgba(255,204,0,0.1);/*体验中心用*/
	}
#zxCupon .usePlatspan3{
		color: #FF6600;
		background-color: rgba(255,102,0,0.1);/*商城体验中心通用*/
	}
</style>


